<template>
  <el-container>
    <el-main>
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="发送成功列表" name="mailSent">
          <MailList ref="mailSent" apiName="sentList" @selectItem="sentSelectItem"></MailList>
        </el-tab-pane>
        <el-tab-pane label="发送失败列表" name="mailFail">
          <MailList ref="mailFail" apiName="failList" @selectItem="failSelectItem"></MailList>
        </el-tab-pane>
        <el-tab-pane label="邮件接口测试" name="mailTest">

        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>
<script>
import MailList from '../components/MailList.vue';
export default {
  components:{
    MailList
  },
  data() {
    return {
      activeName: 'mailSent'
    };
  },
  computed: {
  },
  created() {},
  mounted() {},
  methods: {
    sentSelectItem(row){
      this.$router.push({ name: "mailSentItem", params: {id: row.messageId} });
    },
    failSelectItem(row){
      this.$router.push({ name: "mailFailItem", params: {id: row.messageId} });
    },
    tabClick(tab, event){

      this.$nextTick(() => {
        if (this.$refs[this.activeName])
          this.$refs[this.activeName].layout();
      });
    }
  },
};
</script>
